<template>
  <div>
    <BasicTable @register="registerTable">
      <template #orderState="{ record }">
        {{ getOrderStateText(record.orderState) }}
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup>
  import { BasicTable, useTable } from '@/components/Table';

  import { AllocationRecord } from '@/api/phoneAuth/allocationRecord';
  import { getBasicColumns } from './tableData';
  import Dictionary from '@/utils/dictionary';
  import { ref } from 'vue';
  import { IAllocationRecordResult } from '@/api/phoneAuth/allocationRecord/type';

  const dicts = Dictionary.getLocalMulti(['terimalStatus', 'dispenseStatus', 'phoneOrderState']);

  const total = ref(0); //设备总数量

  const [registerTable, { getRawDataSource }] = useTable({
    title: '',
    api: AllocationRecord,
    columns: getBasicColumns(),
    rowKey: 'id',
    useSearchForm: true,
    formConfig: {
      labelWidth: 100,
      schemas: [
        {
          field: `keyword`,
          label: `关键词`,
          component: 'Input',
          colProps: {
            span: 6,
          },
          componentProps: {
            placeholder: '机构编号、名称、订单号搜索',
          },
        },
        {
          field: `orderState`,
          label: `分配状态`,
          component: 'Select',
          colProps: {
            span: 4,
          },
          componentProps: {
            options: dicts.phoneOrderState.map((item) => {
              return {
                label: item.dictLabel,
                value: item.dictValue,
                key: item.dictValue,
              };
            }),
          },
        },
        {
          field: `time`,
          label: `分配日期`,
          component: 'RangePicker',
          colProps: {
            span: 6,
          },
        },
      ],
    },
    beforeFetch: (parmas) => {
      let time = parmas.time || [];
      return {
        ...parmas,
        startTime: time[0],
        endTime: time[1],
        time: undefined,
      };
    },
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    showIndexColumn: true,
    clickToRowSelect: false,
    afterFetch: (data: IAllocationRecordResult[]) => {
      let resData = getRawDataSource();
      total.value = resData.total;
      return data.map((item) => {
        return {
          ...item,
        };
      });
    },
  });

  function getOrderStateText(val) {
    let item = dicts.phoneOrderState.find((f) => f.dictValue === val);
    return item?.dictLabel;
  }
</script>

<style lang="less" scoped>
  .flex-warp {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .desc {
      margin-left: 10px;
    }
  }
</style>
